<template>
  <v-container header="客户详情" body-class="pa-2" scroll>
    <info-table :info="info" class="white"></info-table>
    <div class="devide-list white mt-3">
      <p class="head">设备列表</p>
      <div class="body">
        <el-button type="primary" size="small" @click="handleAddDevide">新 增</el-button>
        <div class="table-panel mt-1">
          <custom-table ref="table" :showPagination="false" :propData="devices">
            <el-table-column v-for="(item, index) in tableField" :key="index" v-bind="item">
            </el-table-column>
            <el-table-column label="操作" align="center" width="130">
              <template #default="{ row }">
                <el-link :underline="false" type="primary" @click="handleSee(row)">查看</el-link>
                <el-link :underline="false" type="primary" @click="handleEdit(row)">编辑</el-link>
                <el-link :underline="false" type="danger" @click="handleDel(row)">删除</el-link>
              </template>
            </el-table-column>
          </custom-table>
        </div>
      </div>
    </div>
    <pop-devide :visible.sync="showPopDevide" type="operate" :edit="devideEdit" :devideObj="devideObj" @getList="getList"></pop-devide>
    <runTimeChart ref="runTimeChart" class="white mt-3" :customerId="detail.customerId"></runTimeChart>
    <mapRunPath ref="mapRunPath" class="white mt-3" :detail="detail"></mapRunPath>
  </v-container>
</template>
<script>
import {
  getDevideList,
  delDevice
} from '@/api/customer'
import {
  setStorage,
  getStorage,
  rmStorage
} from '@/utils/auth'
import popDevide from './components/popDevide'
import infoTable from './components/infoTable'
import runTimeChart from './components/runTimeChart'
import mapRunPath from './components/mapRunPath'
export default {
  components: {
    popDevide,
    infoTable,
    runTimeChart,
    mapRunPath
  },
  beforeRouteLeave(to, from, next) {
    if (to.path !== '/customer/devideDetail') {
      rmStorage('detail')
    }
    next()
  },
  data() {
    return {
      detail: {},
      devices: [],
      tableField: [
        {
          prop: 'name',
          label: '设备名称',
          align: 'center'
        },
        {
          prop: 'spec',
          label: '设备型号',
          align: 'center'
        },
        {
          prop: 'boxNo',
          label: '采集终端号',
          align: 'center'
        },
        {
          prop: 'imei',
          label: '定位器号',
          align: 'center'
        }
      ],
      showPopDevide: false,
      devideEdit: '',
      devideObj: {}
    }
  },
  created() {
    this.detail = JSON.parse(getStorage('detail'))
    this.getDevideList()
    this.info = {
      head: '基本信息',
      list: [
        {label: '企业名称', value: this.detail.name},
        {label: '联系人', value: this.detail.contactPerson},
        {label: '联系电话', value: this.detail.contactMobile},
        {label: '联系地址', value: this.detail.address}
      ]
    }
  },
  methods: {
    getList() {
      this.getDevideList()
      this.$refs.runTimeChart.getBoxSelectList()
      this.$refs.mapRunPath.imeiSelectList()
    },
    getDevideList() {
      getDevideList(this.detail.customerId).then(res => {
        this.devices = res.data
      })
    },
    handleAddDevide() {
        this.devideEdit = 'add'
        this.devideObj = { customerId: this.detail.customerId }
        this.showPopDevide = true
    },
    handleEdit(row) {
      this.devideEdit = 'edit'
      this.devideObj = row
      this.showPopDevide = true
    },
    handleDel(row) {
      this.$confirm('确定删除此设备？', '提示', {
        type: 'warning'
      }).then(() => {
        delDevice(row.deviceId).then(() => {
          this.$message.success('操作成功')
          this.getList()
        })
      })
      .catch(() => {})
    },
    handleSee(row) {
      this.$router.push({path: '/customer/devideDetail'})
      setStorage('devideDetail', row)
    }
  }
}
</script>
<style lang="scss" scoped>
.head {
  padding: 14px 20px;
  color: #262626;
  font-size: 16px;
  border-bottom: 1px solid #E9E9E9;
}
.devide-list {
  .body {
    padding: 19px 20px;
    height: 370px;
    .table-panel {
      height: calc(100% - 40px);
      border-top: 1px solid #EBEEF5;
      border-right: 1px solid #EBEEF5;
      border-left: 1px solid #EBEEF5;
    }
  }
}
</style>